<!DOCTYPE html>
<html>
  <head>
    <title>Buzz Mood</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light|Molengo"
      rel="stylesheet" type="text/css">
    <link href="/css/screen.css"
      media="screen" rel="stylesheet" type="text/css" />
    <link href="/css/handheld.css"
      media="handheld" rel="stylesheet" type="text/css" />
    <link href="/css/handheld.css"
      media="only screen and (max-device-width: 600px)"
      rel="stylesheet" type="text/css" />
    <script 
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
    </script>
    <script 
      src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js">
    </script>
    <script>
      function replaceUpdates(bucket, mood, scale, effect) {
        var graphWidth = (1.0 * mood.counter / scale) * 100;
        var shortSnippetPattern = new RegExp(
          "^.*?(.{0,65})(" + mood.name + ")(.{0,65}).*?$", "ig"
        );
        var longSnippetPattern = new RegExp("(" + mood.name + ")", "ig");

        var shortSnippet = null;
        var longSnippet = mood.lastContent.replace(
          longSnippetPattern, "<span class=\"highlight\">$1</span>"
        );
        shortSnippet = mood.lastContent;
        shortSnippet = shortSnippet.replace(/<br[^>]*>/ig, " ");
        shortSnippet = shortSnippet.replace(
          /(<[^>]*>(.*?)<\/[^>]*>|<[^>]*>)/ig, ""
        );
        // We don't want to accidentally split on a character entity
        shortSnippet = shortSnippet.replace(/&amp;/g, "&");
        shortSnippet = shortSnippet.replace(/&lt;/g, "<");
        shortSnippet = shortSnippet.replace(/&gt;/g, ">");
        shortSnippet = shortSnippet.replace(/&apos;/g, "\'");
        shortSnippet = shortSnippet.replace(/&quot;/g, "\"");
        shortSnippet = shortSnippet.replace(/\n/g, " ");
        shortSnippet = shortSnippet.replace(/ +/g, " ");
        shortSnippet = shortSnippet.replace(
          shortSnippetPattern, "… $1<span class=\"highlight\">$2</span>$3 …"
        );
        var html = 
          "<div class=\"update\" style=\"display: none;\">" +
            "<h1>" +
              bucket +
            "</h1>" +
            "<p class=\"short snippet\">" +
              shortSnippet +
            "</p>" +
            "<p class=\"long snippet\" style=\"display: none;\">" +
              longSnippet +
            "</p>" +
            "<div class=\"graph\" style=\"width: " +
              graphWidth + "%\">&nbsp;</div>" +
          "</div>";
        $(".contents ." + bucket).append(html);
        $(".contents ." + bucket + " .update").show(effect, {}, 500);
        $(".contents ." + bucket + " .update .short").click(function () {
          $(".contents ." + bucket + " .update .short").hide(
            "blind", {}, 500, function () {
              $(".contents ." + bucket + " .update .long").show(
                "blind", {}, 500
              );
            }
          );
        });
        $(".contents ." + bucket + " .update .long").click(function () {
          $(".contents ." + bucket + " .update .long").hide(
            "blind", {}, 500, function () {
              $(".contents ." + bucket + " .update .short").show(
                "blind", {}, 500
              );
            }
          );
        });
        $(".contents ." + bucket).data('mood', mood);
      }
      
      function renderMoods(data) {
        var scale = null;
        var table = {};
        for (var i = 0; i < data.length; i++) {
          var mood = data[i];
          var bucket = mood.name.replace(/^i /, '');
          if (scale == null || mood.counter > scale) {
            scale = 1.0 * mood.counter;
          }
          table[bucket] = mood;
        }
        // $(".contents").html("");
        // Do the sorting client-side
        var buckets = [
          'love',
          'hate',
          'want',
          'think',
          'believe',
          'feel',
          'wish',
          'hope'
        ];
        for (var i = 0; i < buckets.length; i++) {
          var bucket = buckets[i];
          var mood = table[bucket];
          if (typeof mood != 'undefined') {
            var existingDivs = $('.' + bucket + ' .update');
            if (existingDivs.length > 0) {
              var lastMood = $('.' + bucket).data('mood');
              if (!lastMood || mood.lastModified > lastMood.lastModified) {
                existingDivs.remove();
                replaceUpdates(bucket, mood, scale, "drop");
              }
            } else {
              replaceUpdates(bucket, mood, scale, "fade");
            }
          }
        }
      }

      var ioBlock = false;
      var nextUpdate = null;
      var backOff = 5000;
      $(document).ready(function() {
        setInterval(function () {
          // Don't do anything if we're waiting for an XHR
          if (ioBlock) return;
          var now = new Date().getTime();
          // Check if we should update again
          if (!nextUpdate || nextUpdate < now) {
            ioBlock = true;
            $.ajax({
              url: '/pshb/updates',
              async: true,
              ifModified: true,
              success: function (data, status, xhr) {
                if (typeof data != 'undefined') {
                  backOff = 5000;
                  renderMoods(data);
                } else {
                  backOff *= 2;
                }
                nextUpdate = now + backOff;
                ioBlock = false;
              }
            })
          }
        }, 1000);
      })
    </script>
  </head>
  <body>
    <div class="contents">
      <div class="group love">
      </div>
      <div class="group hate">
      </div>
      <div class="group want">
      </div>
      <div class="group think">
      </div>
      <div class="group believe">
      </div>
      <div class="group feel">
      </div>
      <div class="group wish">
      </div>
      <div class="group hope">
      </div>
    </div>
    <footer>
      © 2010 Google<br />
      Inspired by <a href="http://twistori.com/">twistori</a>.<br />
      <a href="http://code.google.com/p/buzz-mood/">View source</a>.
    </footer>
  </body>
</html>
